import { FC, useEffect, useRef, useState } from 'react';
import { Form, Input, Button, Select, Switch, message } from 'antd';
import "../../static/css/reviewer/revAdd.css"
import {Navigate, useLocation, useParams} from 'react-router'
import {getShow,postEdit,postAdd} from '../../apis/reviewer'
import { useNavigate } from 'react-router-dom'


const RevAdd: FC<any> = (props: any): JSX.Element => {
  const navigate = useNavigate();
  const formRef:any = useRef()
  // 路由传过来的id类型可能不同 加上感叹号变成字符串类型
  const {id,titles} = useParams()
  console.log(id,titles);
  const [title,setTitle] = useState('')

  // let state = useLocation() //接收ID
  
  useEffect(() => {
    getData()
  }, [id])


  // 数据回显
  const getData = async ()=>{
    const res:any = await getShow(Number(id))
    console.log(res);
    
    formRef.current.setFieldsValue(res.data);
  }


  const [xiugai,getXiugai] = useState({})
  const onFinish = async (e: any) => {
    console.log(e);
    getXiugai(e)
    console.log(xiugai);
    
    if(titles === '2'){
      const res:any = await postAdd(e)
      console.log(res);
      navigate('/index/reviewer')
      
    }else if(titles==='1'){
      // console.log(e);
      console.log(id,xiugai);
      
      const res:any = await postEdit({id:id,formdata:xiugai})
      console.log(res);
      if(res.code === '00000'){
        message.success('修改成功')
        navigate('/index/reviewer')
      }
    }
  }


  // 开启
  const onChange = (checked: boolean) => {
    // console.log(`switch to ${checked}`);
  };

  return (
    <div>
    <h2>{title}</h2>
    {
      titles==='1' && 
      <h2>修改</h2>
    }
    {
      titles==='2' && 
      <h2>添加</h2>
    }
      <div className="form">

        <Form
          ref={formRef}
          // initialValues={initialValues}
          onFinish={onFinish}
          labelCol={{ span: 2 }}
          wrapperCol={{ span: 7 }}
          layout="horizontal"
        >
          <Form.Item name="reviewer_name" label="审核人姓名" rules={[{ required: true }]}>
            <Input placeholder='请输入审核姓名'></Input>
          </Form.Item>

          <Form.Item name="openid" label="openid" rules={[{ required: true }]}>
            <Input placeholder='请输入openid'></Input>
          </Form.Item>

          <Form.Item name="mobile" label="手机号">
            <Input placeholder='请输入手机号'></Input>
          </Form.Item>

          <Form.Item name="department" label="部门">
            <Input placeholder='请选择部门'></Input>
          </Form.Item>

          <Form.Item name="job" label="职务" rules={[{ required: true }]}>
            <Input placeholder='请输入职务'></Input>
          </Form.Item>

          <Form.Item label="是否启用">
            <Switch defaultChecked onChange={onChange} />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 2, span: 7 }}>
            <Button htmlType="button">取消</Button>
            <Button type="primary" htmlType="submit">确定</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default RevAdd;